<template>
  <div class="layout">
    <div class="layout-bg">
      <div class="bg-item" v-lazy:background-image="imgObj1"></div>
      <div class="bg-item" v-lazy:background-image="imgObj2"></div>
      <div class="bg-item" v-lazy:background-image="imgObj3"></div>
      <div class="bg-item" v-lazy:background-image="imgObj4"></div>
    </div>
    <div class="layout-content">
      <div class="content-title">
        四川农信2020年同城灾备切换演练
        <div class="today">{{nowDate}}</div>
      </div>
      <main>
        <aside class="left">
          <div class="top">
            <border-box type="3">
              <slot name="module1"></slot>
            </border-box>
          </div>
          <div class="middle">
            <border-box>
              <slot name="module2"></slot>
            </border-box>
          </div>
          <div class="bottom">
            <border-box type="3">
              <slot name="module3"></slot>
            </border-box>
          </div>
        </aside>
        <section>
          <div class="top">
            <div class="tab-item tab-item1">
              <svg-icon icon-class="tab_left"></svg-icon>
              <span class="label">西信数据中心</span>
            </div>
            <div class="tab-item tab-item2">
              <svg-icon icon-class="tab_right"></svg-icon>
              <span class="label">石墙数据中心</span>
            </div>
          </div>
          <div class="middle">
            <div class="left">
              <border-box type="1">
                <slot name="module4"></slot>
              </border-box>
            </div>
            <div class="right">
              <border-box>
                <slot name="module5"></slot>
              </border-box>
            </div>
          </div>
          <div class="bottom">
            <border-box>
              <slot name="module6"></slot>
            </border-box>
          </div>
        </section>
        <aside class="right">
          <div class="top">
            <border-box type="2">
              <slot name="module7"></slot>
            </border-box>
          </div>
          <div class="bottom">
            <border-box>
              <slot name="module8"></slot>
            </border-box>
          </div>
        </aside>
      </main>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import BorderBox from '@/components/BorderBox'

export default {
  components: {
    BorderBox
  },
  computed: {
    ...mapGetters(['nowDate'])
  },
  data() {
    return {
      imgObj1: {
        src: require('@/assets/1.jpg'),
        loading: require('@/assets/1-576.jpg')
      },
      imgObj2: {
        src: require('@/assets/2.jpg'),
        loading: require('@/assets/2-576.jpg')
      },
      imgObj3: {
        src: require('@/assets/3.jpg'),
        loading: require('@/assets/3-576.jpg')
      },
      imgObj4: {
        src: require('@/assets/4.jpg'),
        loading: require('@/assets/4-576.jpg')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.layout{
  width: 100%;
  height: 100%;
  position: relative;
  .layout-bg{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1;
    font-size: 0;
    .bg-item{
      display: inline-block;
      width: 25%;
      height: 100%;
      background-size: cover;
    }
  }
  .layout-content{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    .content-title{
      font-size: 24px;
      line-height: 46px;
      width: 100%;
      height: 50px;
      color: #FFFFFF;
      text-align: center;
      position: relative;
      .today{
        color: #CCF1F7;
        font-size: 14px;
        line-height: 1;
        position: absolute;
        bottom: 0;
        right: 17px;
      }
    }
    main{
      width: 100%;
      margin-top: 15px;
      font-size: 0;
      text-align: center;
      aside, section{
        display: inline-block;
        vertical-align: top;
        min-height: 100px;
      }
      aside{
        &.left{
          width: 470px;
          > div {
            width: 100%;
          }
          .top{
            height: 115px;
            margin-bottom: 8px;
          }
          .middle{
            height: 281px;
            margin-bottom: 8px;
          }
          .bottom{
            height: 156px;
          }
        }
        &.right{
          width: 473px;
          .top{
            height: 300px;
            margin-bottom: 8px;
          }
          .bottom{
            height: 260px;
          }
        }
      }
      section{
        width: 1320px;
        margin: 0 8px;
        .top{
          width: 222.8px;
          height: 23.8px;
          position: relative;
          left: -1px;
          z-index: 1;
          font-size: 0;
          text-align: left;
          .tab-item{
            width: 111.4px;
            height: 23.8px;
            line-height: 23.8px;
            display: inline-block;
            position: relative;
            &.tab-item1{
              .label{
                color: rgba(0, 237, 254, 1);
                left: 12px;
              }
            }
            &.tab-item2{
              position: relative;
              left: -3px;
              .label{
                color: rgba(72, 234, 164, 1);
                left: 17px;
              }
            }
            .label{
              font-size: 12.28px;
              font-family: PingFangSC-Light;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
        .middle{
          width: 100%;
          height: 277.2px;
          position: relative;
          top: -1px;
          font-size: 0;
          margin-bottom: 7px;
          .left, .right{
            display: inline-block;
            position: relative;
            height: 100%;
          }
          .left{
            width: 875px;
            margin-right: 7px;
            vertical-align: top;
          }
          .right{
            width: 438px;
          }
        }
        .bottom{
          height: 260px;
        }
      }
    }
  }
}
</style>
